<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 100px;
				height: 100px;
				background: red;
				margin: 10px;
			}
			.active{
				border-radius: 20px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			{{message}}
			{{1*5-6+5*4/5}}
			<!--绑定message的值-->
			<input v-model="message" placeholder="请输入" />
			<button @click="btn()">弹出</button>
			<p v-text="p"></p>
			<p v-text="'张三是'+(obj.age>18?'成年':'未成年')+'人'"></p>
			<p v-html="html"></p>
			<p>{{arr.length}}</p>
			<p>{{arr[3]}}</p>
			<p>{{obj.name+"今年"+obj.age+"岁了"}}</p>
			<p>{{obj.name}}{{"是"+(obj.age>18?"成年":"未成年")+"人"}}</p>
			<p>{{function(){return "123"}()}}</p>
			<!--绑定isshow的值-->
			<input type="checkbox" v-model="isshow" />
			<!--通过样式display控制标签是否显示-->
			<div class="box" v-show="isshow">box1{{otext("box1")}}</div>
			<!--控制标签是否存在dom中  如果不存在则不会调用方法-->
			<div class="box" v-if="isshow">box2{{otext("box2")}}</div>
			<input v-model="flag" />
			<div class="box" v-if="flag==1">box3</div>
			<div class="box" v-else-if="flag==2||flag==3">box4</div>
			<div class="box" v-else>box5</div>
			<div class="box" v-if="flag!=1">box6</div>
			<!--v-for 里面是数组对象-->
			<p v-for="i in item">
				{{i.message}}
			</p>
			<p v-for="(i,index) in item">
				{{"索引："+index+"   值："+i.message}}
			</p>
			<p v-for="val of obj">
				{{val}}
			</p>
			<!--v-bind:绑定-->
			<!--{}括号  :简写-->
			<div :class="{box:otrue,active:otrue}" :title="message"></div>
			<!--[]数组形式-->
			<div v-bind:class="[iclass.radius,iclass.display]">class</div>
			<div v-bind:style="ocss">style</div>
			<!--dom输出为class="active box"-->
		</div>
	</body>
</html>
<script src="vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el:"#box",
		data:{
			message:"hello world!",
			p:"这是一个p便签",
			arr:["a","b","c","d"],
			obj:{
				name:"张三",
				age:25
			},
			html:"<mark>你好</mark>",
			isshow:false,
			flag:1,
			item:[
				{message:"123"},
				{message:456}
			],
			otrue:true,
			ofalse:false,
			iclass:{
				radius:"active",
				display:"box"
			},
			ocss:{
				width: "100px",
				height: "100px",
				background: "blue",
				margin: "10px",
				"border-radius": '20px',
				"line-height": 100+"px",
				textAlign: "center"
			}
		},
		methods:{
			btn(){
				alert(123)
			},
			otext(val){
				console.log(val+"调用")
			}
		}
	})
</script>